<template>
	<view class="custom-tabbar">
		<view 
			v-for="(item, index) in tabList" 
			:key="item.pagePath"
			class="tabbar-item"
			:class="{ active: activeIndex === index }"
			@click="switchTab(index,item)"
		>
			
			<image 
				class="tabbar-icon" 
				:src="activeIndex === index ? item.selectedIconPath : item.iconPath"
				mode="aspectFit"
			/>
			<text class="gvr_text tabbar-text">{{ item.text }}</text>
	</view>
	</view>
</template>

<script setup>
import { ref, computed, watch, onMounted,onBeforeMount, nextTick } from 'vue'
import { USER_TYPES } from '@/service/api.js'
import { handleRouteGuard } from '@/utils/routerGuard.js'
import { userStore } from '@/utils/userStore.js'

//父传子值
const props = defineProps({
	activeIndex: {
		type: Number,
		required: true,
		default: 0
	}
})
//子类调用父类方法
const emit = defineEmits(['popLogin'])

const userRole = ref('')
const tabList  = ref([])
// tabbar 配置
const tabBarConfig = {
	home: {
			"pagePath": "pages/index/index",
			"text": "首页",
			"iconPath": "../../static/tabbar/home.png",
			"selectedIconPath": "../../static/tabbar/home-active.png"
	},
	service: {
		"pagePath": "pages/gvr-service/gvr-service",
		"text": "服务",
		"iconPath": "../../static/tabbar/service.png",
		"selectedIconPath": "../../static/tabbar/service-active.png"
	},
	information: {
		"pagePath": "pages/gvr-information/gvr-information",
		"text": "资讯",
		"iconPath": "../../static/tabbar/information.png",
		"selectedIconPath": "../../static/tabbar/information-active.png"
	},
	shop: {
		"pagePath": "pages/gvr-shop/gvr-shop",
		"text": "店铺",
		"iconPath": "../../static/tabbar/shop.png",
		"selectedIconPath": "../../static/tabbar/shop-active.png"
	},
	my:{
		"pagePath": "pages/gvr-my/gvr-my",
		"text": "我的",
		"iconPath": "../../static/tabbar/my.png",
		"selectedIconPath": "../../static/tabbar/my-active.png"
	}
}
// 切换 tab
const switchTab = async (index,item) => {
	// 避免重复点击
	if (props.activeIndex === index) return
		try {
			// 检查路由守卫
			const auth = await handleRouteGuard(item.pagePath)
			if (auth) {
				// 执行跳转
				uni.switchTab({
					url: `/${item.pagePath}`
				})
			} else {
				emit('popLogin')
			}
		} catch (err) {
			console.error('switchTab fail:', err)
		}
}

// 更新用户角色
const updateUserRole = () => {
		updateTabList()
		uni.reLaunch({
			url:'/pages/index/index'
		})
}
const updateTabList = ()=> {
	userRole.value = userStore.getType()
	const tabs = [tabBarConfig.home]
	if (userRole.value === USER_TYPES.SUPPLIER || 
		userRole.value === USER_TYPES.CLIENT) {
		tabs.push(tabBarConfig.information)
		tabs.push(tabBarConfig.shop)
		tabs.push(tabBarConfig.my)
	} else {
		tabs.push(tabBarConfig.service)
		tabs.push(tabBarConfig.information)
		tabs.push(tabBarConfig.shop)
		tabs.push(tabBarConfig.my)
	}
	tabList.value = tabs
}
onBeforeMount(() => {
	console.log('onBeforeMount')
	updateTabList()
	
})
onMounted(() => {
	console.log('onMounted')
})
//父掉子方法
defineExpose({
	updateUserRole
})

</script>

<style lang="scss" scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: env(safe-area-inset-bottom);
	// box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
	box-shadow: 0px -4rpx 10rpx 0px rgba(232,232,232,0.5);
	
	// 顶部边框
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1rpx;
	    background: #E8E8E8;
		transform: scaleY(0.5);
	}
}

.tabbar-item {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	
	// 选中状态
	&.active {
		// .tabbar-icon {
		// 	transform: scale(1.1);
		// }
		
		.tabbar-text {
			// color: #FAC653;
			// font-weight: 500;
		}
	}
}

.tabbar-icon {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 4rpx;
	//transition: transform 0.2s ease;
}

.tabbar-text {
	font-size: 16rpx;
	color: #000000;
	line-height: 1;
}

// 适配 iPhone X 等机型
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
	.custom-tabbar {
		padding-bottom: constant(safe-area-inset-bottom);
	}
}
</style>
